<script setup lang="ts">
import axios from 'axios';
import {ref, watch} from 'vue'
import { ArticleItem, ArticleResData} from '../types/data'
import { useChannelStore } from '../stores/channel';
// const props = defineProps<{channelId: number}>()
const store = useChannelStore()
const articles = ref<ArticleItem[]>([])
// 通过watch监听 channelId的变化,当channelId变化时请求文章列表接口更新文章列表数据
watch(() => store.channelId, async () => {
  const res = await axios.get<ArticleResData>(
    `http://geek.itheima.net/v1_0/articles`, {
      params: {
        channel_id: store.channelId,
        timestamp: Date.now()
      }
    })
    articles.value =res.data.data.results
}, {
  immediate: true
})

// 调用接口看一下数据返回的是什么结构
// axios.get(`http://geek.itheima.net/v1_0/articles`, {
//   params: {
//     channel_id: props.channelId,
//     timestamp: Date.now()
//   }
// }).then(res => {
//   console.log('文章接口数据', res.data)
// })

</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in articles" :key="item.art_id">
      <p class="title">{{item.title}}</p>
      <img class="img" v-for="(src, i) in item.cover.images" :src="src" :key="i" alt="">
      <div class="info">
        <span>{{item.aut_name}}</span>
        <span>{{item.comm_count}}评论</span>
        <span>{{item.pubdate}}</span>
      </div>
    </div>
  </div>
</template>
